<template>
  <div class="playPageHead">
        <div class="message">
            <div class="imgBox" @click="$router.go(-1)">
                <img src="../../../assets/images/zoujiantou.png" alt="">
            </div>
            <div class="songBox" v-if="detail">
                <h3>{{detail.songs[0].name}}</h3>
                <p>{{detail.songs[0].ar[0].name}} &gt;</p>
            </div>
        </div>
        <div class="iconBox">
            <img src="../../../assets/images/fenxiang.png" alt="">
        </div>
  </div>
</template>

<script>
    export default {
        props:["detail"]
    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/css/common.scss";
    .playPageHead{
        padding: vw(16) vw(24);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .message{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .imgBox{
                width: vw(32);
                height: vw(32);
                font-size: 0;
                overflow: hidden;
                img{
                    display: block;
                    width: 100%;
                }
            }
            .songBox{
                margin-left: vw(16);
                color: white;
                p{
                    color: #bfbfbf;
                }
            }
        }
        .iconBox{
            width: vw(36);
            height: vw(36);
            font-size: 0;
            overflow: hidden;
            img{
                width: 100%;
                display: block;
            }
        }
    }
</style>